<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 200px;
				height: 200px;
				/* border: 1px solid #000; */
				box-sizing: border-box;
				margin: 100px auto;
				position: relative;
				transform: rotateY(0deg) rotateX(0deg);
				transform-style: preserve-3d;
			}
			ul li{
				list-style: none;
				width: 200px;
				height: 200px;
				text-align: center;
				font-size: 60px;
				line-height: 200px;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			ul li:nth-child(1){
				background-color: red;
				transform: translate(-100px) rotateY(90deg);
			}
			ul li:nth-child(2){
				background-color: blue;
				transform: translate(100px) rotateY(90deg);
			}
			ul li:nth-child(3){
				background-color: pink;
				transform: translate(0,-100px) rotateX(90deg);
			}
			ul li:nth-child(4){
				background-color: purple;
					transform: translate(0,100px) rotateX(90deg);
			}
			ul li:nth-child(5){
				background-color: yellow;
					transform: translateZ(100px);
			}
			ul li:nth-child(6){
				background-color: green;
				transform: translateZ(-100px);
			}
			
		</style>
	</head>
	<body>
		
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		
		
		
	</body>
</html>